<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .left {
            float: left;
            width: 200px;
            height: 500px;
            border-right: 1px solid #666;
        }

        .right {
            float: left;
            margin-left: 80px;
            margin-top: 20px;
        }
        .wrap-div {
            width: 100vw;
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            background-color: rgba(220, 240, 240, .8);
        }
        .content-div {
            width: 400px;
            height: 250px;
            background-color: #fff;
            border-radius: 8px;
            margin-left: 400px;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div id="app">
        <v-top></v-top>
        <v-content></v-content>
        <v-form v-show="isShow"></v-form>
    </div>
    <template id="v-top">
        <div>
            <img src="" alt="pic">
            <a href="./02component.html">02component</a>
            <a href="./02component.html">02component</a>
            <a href="./02component.html">02component</a>
        </div>
    </template>
    <template id="v-content">
        <div>
            <v-left class="left"></v-left>
            <v-right class="right"></v-right>
        </div>
    </template>
    <template id="v-left">
        <div>
            <ul>
                <li v-for="(item,index) in list" :key="item">
                    <a :href="item">第{{index + 1}}个</a>
                </li>
            </ul>
        </div>
    </template>
    <template id="v-right">
        <div>
            <table border="1">
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>年龄</th>
                        <th>手机</th>
                        <th>注册时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr :class="{odd: index % 2}" v-for="(item, index) in studentsList" :key="index">
                        <td>{{item.name}}</td>
                        <td>{{item.sex}}</td>
                        <td>{{item.age}}</td>
                        <td>{{item.phone}}</td>
                        <td>2022-4-2 09:10:00</td>
                        <td>
                            <button>del</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </template>
    <template id="v-form">
        <div class="wrap-div">
            <div class="content-div">
                <input type="text">
                <input type="text">
                <button>提交</button>
            </div>
        </div>
    </template>
    <script src="../vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                isShow: false
            },
            components: {
                vTop: {
                    template: '#v-top'
                },
                vContent: {
                    template: '#v-content',
                    components: {
                        vLeft: {
                            template: '#v-left',
                            data() {
                                return {
                                    list: [
                                        '../day04/01axios.html',
                                        '../day04/02生命周期.html',
                                        '../day04/03过滤器.html',
                                        '../day04/作业.html',
                                    ]
                                }
                            }
                        },
                        vRight: {
                            template: '#v-right',
                            data() {
                                return {
                                    studentsList: [],
                                }
                            },
                            created() {
                                this.studentsList = JSON.parse(localStorage.getItem('studentsList')) || []
                            }
                        }
                    }
                },
                vForm: {
                    template: '#v-form',
                    data() {
                        return {
                            
                        }
                    }
                }
            }
        })
    </script>
</body>

</html>